<template>
	<view v-if="showMobile" style="padding-bottom: 15px;">
		<up-card :show-foot="false" v-for="ord in order">
			<template #head>
				<view class="order-head">
					<view class="order-head-title">
						兑换单号：{{ ord.order_sn }}
					</view>
					<view class="order-head-state">
						<up-text type="info" v-if="ord.state === 1" text="兑换中"></up-text>
						<up-text type="success" v-else-if="ord.state === 2" text="待激活"></up-text>
						<up-text type="success" v-else-if="ord.state === 3" text="已激活"></up-text>
						<up-text type="danger" v-else text="兑换失败"></up-text>
					</view>
				</view>
			</template>
			<template #body>
				<view class="order-data">
					<view class="order-label">
						收货手机号
					</view>
					<view class="order-value">
						{{ ord.mobile }}
					</view>
				</view>
				<view class="order-data">
					<view class="order-label">
						兑换产品
					</view>
					<view class="order-value">
						{{ ord.productData.name }}
					</view>
				</view>
				<view class="order-data">
					<view class="order-label">
						兑换礼包
					</view>
					<view class="order-value">
						{{ ord.gift.name }}-{{ ord.attrData.name }}
					</view>
				</view>
				<view class="order-data">
					<view class="order-label">
						兑换时间
					</view>
					<view class="order-value">
						{{ ord.create_time }}
					</view>
				</view>
				<vivew class="order-data" v-if="ord.state === 2">
					<view class="order-label">
						
					</view>
					<view class="order-value">
						<up-text type="primary" text="立即激活" @tap="showPro(ord)"></up-text>
					</view>
				</vivew>
			</template>
		</up-card>
	</view>
	<view class="order-mobile-check" v-else>
		<view class="order-titles">兑换信息查询</view>
		<view class="order-input">
			<up-input placeholder="请输入兑换手机号" clearable border="bottom" v-model="loginData.mobile"></up-input>
		</view>
		<view class="order-input">
			<up-input placeholder="请输入短信验证码" clearable border="bottom" v-model="loginData.code">
				<template #suffix>
					<up-text type="primary" text="获取验证码" v-if="time < 1" @tap="sendSms"></up-text>
					<up-text type="info" :text="time+'秒后重发'" v-else></up-text>
				</template>
			</up-input>
		</view>
		<view class="order-input">
			<up-button type="primary" shape="circle" text="查询订单" @click="login"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		orderList,
		loginRequest,
		sendSmsToOrder
	} from '../../utils/api/api';
	const mobile = uni.getStorageSync("mobile")
	const page = ref(1)
	const order = ref([])
	const last_page = ref(1)
	const time = ref(0)
	let timer;
	const loginData = reactive({
		mobile: "",
		code: ""
	})
	const showMobile = ref(false)
	onShow(() => {
		// console.log(mobile)
		if (mobile.mobile) {
			const now = new Date().getTime()
			const chat = (now - mobile.timer) / 1000 / 3600
			if (chat > 24) {
				uni.removeStorageSync("mobile")
				showMobile.value = false
				return
			}
			//获取当前手机号的下单信息
			showMobile.value = true
			getOrder()
		} else showMobile.value = false
	})
	onReachBottom(() => {
		// getOrder()
		if (page.value < last_page.value) getOrder()
	})
	const getOrder = () => {
		orderList({
			page: page.value,
			mobile: mobile.mobile
		}).then(res => {
			order.value = order.value.concat(res.result.lst)
			last_page.value = res.result.lastPage
		}).catch((res) => {
			uni.showToast({
				title: res,
				icon: "none"
			})
		})
	}
	const sendSms = () => {
		if (!/^1[2-9]\d{9}$/.test(loginData.mobile)) return uni.showToast({
			title: "请确认手机号是否输入正确！",
			icon: "none"
		})
		sendSmsToOrder(loginData.mobile).then(res => {
			time.value = 60
			djs()
		}).catch(res => {
			uni.showToast({
				title: res,
				icon: "none"
			})
		})
	}
	const djs = () => {
		timer = setTimeout(() => {
			if (time.value < 1) {
				clearTimeout(timer)
				return
			}
			time.value--
			djs()
		}, 1000)
	}
	const login = () => {
		if (!/^1[2-9]\d{9}$/.test(loginData.mobile)) return uni.showToast({
			title: "请确认手机号是否输入正确！",
			icon: "none"
		})

		if (!/^[1234567890]{6}$/.test(loginData.code)) {
			return uni.showToast({
				title: "请输入6数字验证码！",
				icon: "none"
			})
		}
		uni.showLoading({
			mask: true
		})
		loginRequest(loginData).then((res) => {
			order.value = res.result.lst
			last_page.value = res.result.lastPage
			uni.setStorageSync("mobile", {
				mobile: loginData.mobile,
				timer: new Date().getTime()
			})
			showMobile.value = true
			uni.hideLoading()
		}).catch(res => {
			uni.hideLoading()
			uni.showToast({
				title: res,
				icon: "none"
			})
		})
	}
	
	const showPro = ord=>{
		uni.navigateTo({
			url: '/pages/product/product?order='+ord.order_sn
		})
	}
</script>

<style lang="scss">
	.order-head {
		display: flex;
		justify-content: space-between;
	}

	.order-data {
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 1.75;
	}

	.order-mobile-check {
		position: fixed;
		left: 15px;
		right: 15px;
		top: 85px;
		box-sizing: border-box;
		padding: 15px;
		border: 1px solid #cecece;
		border-radius: 10px;

		.order-titles {
			text-align: center;
			margin-bottom: 15px;
			font-size: 1.3rem;
		}

		.order-input {
			margin-bottom: 15px;
		}
	}
</style>